<template>
  <div>
    <bread first="数据统计"
           second="数据报表"></bread>
    <div ref='main'
         id='main'>
    </div>
     
  </div>
</template>
           
<script>
import { reportsApi } from '@/api'
import * as echarts from 'echarts';
import Bread from '../components/Bread.vue';

export default {
  components: { Bread },
  name: '',
  data () {
    return {
      option: {
        title: {
          text: '用户来源'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#E9EEF3'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            boundaryGap: false
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ]
      }
    }
  },
  created () {

  },
  methods: {

  },
  async mounted () {
    const res = await reportsApi()
    this.option = { ...this.option, ...res.data.data }
    console.log(this.option, 333);
    //var chartDom=document.getElementById('main');
    var chartDom = this.$refs.main
    var myChart = echarts.init(chartDom);


    this.option && myChart.setOption(this.option);
  }
}
</script>
<style lang='less'  scoped>
#main {
  width: 1250px;
  height: 400px;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
}
</style>
